<template>
	<view class="post_box">
		<uni-icons v-if="imgurl" type="close" size="30" color="#fff" class="close" @click="close"></uni-icons>

		<!-- <image v-if="imgurl" :src="imgurl" style="width: 560rpx;height: 1098rpx;" mode="" class="img"></image> -->
		<img v-if="imgurl" :src="imgurl" style="width: 560rpx;height: 1098rpx;" mode="" class="img"/>
		<canvas v-else canvas-id="mycanvas" id="mycanvas" ref="mycanvas"
			style="width: 560rpx;height: 1098rpx;position: fixed;left: -750rpx;">
		</canvas>
	</view>
</template>

<script>
	import {
		createqrcode
	} from '@/api/shopping/shopping.js'
	import {
		mapState
	} from 'vuex'
	export default {
		props: ['info', 'topic_id'],
		data() {
			return {
				canvasShow: true,
				imgurl: '',
				cWidth: 0,
				cHeight: 0,
				detailRow: 0,
				code: '',
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			async requireInfo(data) {
				uni.showLoading({
					title: '加载中'
				})
				const res = await createqrcode({
					// page: 'pages/shopping/commodity/detail/index',
					// scene: `id=${this.info.id}&topic_id=${this.topic_id}`
				})
				if (res) {
					this.code = res.data.url;
				}
				this.cWidth = this.$refs.mycanvas.$el.offsetWidth;
				this.cHeight = this.$refs.mycanvas.$el.offsetHeight;
				this.canvasImg()
			},
			async canvasImg() {
				let conWidth = (this.cWidth * 0.85).toFixed(0);
				let conHeight = (this.cHeight * 0.80).toFixed(0);
				let left = (this.cWidth - conWidth) / 2;
				let inLeft = left + (conWidth * 0.05);
				let imgWidth = conWidth * 0.9;
				let headTop = this.cHeight * 0.05;
				let nameTop = this.cHeight * 0.05;
				let desTop = this.cHeight * 0.1;
				let conTop = this.cHeight * 0.17;
				let imgTop = this.cHeight * 0.19;
				let imgHeight = this.cHeight * 0.45;
				let detailTop = this.cHeight * 0.65;
				let codeLeft = this.cWidth * 0.63;
				let imgs = await this.loadImgs([this.info.poster_image, this.userinfo.headimgurl, this.code])

				let myCanvas = uni.createCanvasContext('mycanvas', this);
				myCanvas.setFillStyle("rgba(245, 70, 66, 1)");
				myCanvas.fillRect(0, 0, this.cWidth, this.cHeight);
				// myCanvas.stroke();
				myCanvas.save();

				myCanvas.font = "16px PingFangSC-Regular";
				myCanvas.fillStyle = '#fff';
				myCanvas.fillText(this.userinfo.nickname, 68, nameTop + 16);
				myCanvas.save();

				myCanvas.font = "12px PingFangSC-Regular";
				myCanvas.fillStyle = '#fff';
				this.drawtext(myCanvas, "“低价超值购好物，各种模式领红包”", 68, desTop, imgWidth - 20, 14);
				myCanvas.save();

				myCanvas.setFillStyle("#fff");
				myCanvas.fillRect(left, conTop, conWidth, conHeight);
				myCanvas.save();

				myCanvas.drawImage(imgs[0], inLeft, imgTop, imgWidth, imgHeight);


				myCanvas.font = "14px PingFangSC-Regular";
				myCanvas.fillStyle = '#000';
				this.drawtext(myCanvas, this.info.name, inLeft, detailTop, imgWidth, 20);
				myCanvas.save();

				let tagTop = this.cHeight * 0.75 + this.detailRow;
				let priceTop = this.cHeight * 0.85 + this.detailRow;
				let wxTop = this.cHeight * 0.89 + this.detailRow;
				let wxsecondTop = this.cHeight * 0.92 + this.detailRow;
				let codeTop = this.cHeight * 0.83 + this.detailRow;

				myCanvas.beginPath();
				myCanvas.setFillStyle("rgba(250, 101, 61, 0.14)");
				myCanvas.fillRect(inLeft, tagTop, imgWidth, 30);
				myCanvas.save();

				myCanvas.font = "10px PingFangSC-Regular";
				myCanvas.fillStyle = '#FA653D';
				myCanvas.fillText(`${this.info.people_number}人拼购未中平台最高补贴${this.info.alone_red_packet}元红包`, inLeft + 8,
					tagTop + 18);
				myCanvas.save();

				myCanvas.font = "14px PingFangSC-Regular";
				myCanvas.fillStyle = '#FA653D';
				myCanvas.fillText("¥", inLeft, priceTop);
				myCanvas.save();

				myCanvas.font = "20px PingFangSC-Regular";
				myCanvas.fillStyle = '#FA653D';
				myCanvas.fillText(this.info.selling_price, inLeft + 10, priceTop);
				myCanvas.save();

				myCanvas.font = "12px PingFangSC-Regular";
				myCanvas.fillStyle = '#7A7A7A';
				myCanvas.fillText("长按保存到相册", inLeft, this.cHeight * 0.95 + this.detailRow);
				myCanvas.save();

				myCanvas.font = "12px PingFangSC-Regular";
				myCanvas.fillStyle = '#7A7A7A';
				myCanvas.fillText("微信长按识别二维码", inLeft, wxTop);
				myCanvas.save();

				myCanvas.font = "12px PingFangSC-Regular";
				myCanvas.fillStyle = '#7A7A7A';
				myCanvas.fillText("立即带走", inLeft, wxsecondTop);
				myCanvas.save();

				myCanvas.drawImage(imgs[2], codeLeft, codeTop, 70, 70);

				myCanvas.beginPath();
				
				myCanvas.drawImage(imgs[1], left, headTop, 40, 40);
				myCanvas.restore()
				myCanvas.save();

				myCanvas.draw(true, () => {
					uni.canvasToTempFilePath({
						canvasId: 'mycanvas',
						success: (res) => {
							this.imgurl = res.tempFilePath;
							this.canvasShow = true;
							uni.hideLoading();
						},
						fail: () => {
							uni.showToast({
								title: '加载失败',
								duration: 2000
							});
						}
					}, this);
				});
			},
			// savePicture() {
			// 	let base64 = this.imgurl;
			// 	var arr = base64.split(',');
			// 	var bytes = atob(arr[1]);
			// 	let ab = new ArrayBuffer(bytes.length);
			// 	let ia = new Uint8Array(ab);
			// 	for (let i = 0; i < bytes.length; i++) {
			// 		ia[i] = bytes.charCodeAt(i);
			// 	}
			// 	var blob = new Blob([ab], { type: 'application/octet-stream' });
			// 	var url = URL.createObjectURL(blob);
			// 	var a = document.createElement('a');
			// 	a.href = url;
			// 	a.download = new Date().valueOf() + ".png";
			// 	var e = document.createEvent('MouseEvents');
			// 	e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			// 	a.dispatchEvent(e);
			// 	URL.revokeObjectURL(url);
			// },
			drawtext(myCanvas, t, x, y, w, d) {
				let chr = t.split("")
				let temp = ""
				let row = []
				for (let a = 0; a < chr.length; a++) {
					if (myCanvas.measureText(temp).width < w && myCanvas.measureText(temp + (chr[a])).width <= w) {
						temp += chr[a];
					} else {
						row.push(temp);
						temp = chr[a];
					}
				}
				row.push(temp)
				for (let b = 0; b < row.length; b++) {
					if (b <= 1) {
						myCanvas.fillText(row[b], x, y + (b + 1) * d); //每行字体y坐标间隔20
						this.detailRow = (b - 1) * d;
					}
				}
			},
			close() {
				this.$emit('close')
			},
			loadImgs(imgs) {
				return new Promise((wpr) => {
					let pArr = []
					imgs.forEach(e => {
						pArr.push(new Promise((r) => {
							uni.getImageInfo({
								src: e,
								success: res => {
									r(res.path)
								}
							})
						}))
					})
					Promise.all(pArr).then(imgs => {
						wpr(imgs)
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/css/color.scss';

	.post_box {
		position: relative;

		.close {
			position: absolute;
			top: -30rpx;
			right: -30rpx;
			z-index: 999;
		}

		.img {
			width: 560rpx;
			display: block;
			-webkit-touch-callout: default;
		}

		.save_btn {
			width: 750rpx;
			height: 140rpx;
			text-align: center;
			line-height: 140rpx;
			color: $black;
			font-size: 30rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
		}
	}
</style>
